<template>
    <div class="edit-popup">
        <popup ref="popupRef" title="设置存储" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="140px" :rules="formRules">
                <el-form-item label="存储方式" prop="engine">
                    <div>
                        <el-radio model-value>{{ getStorageInfo?.name }} </el-radio>
                        <div class="form-tips">{{ getStorageInfo?.tips }}</div>
                    </div>
                </el-form-item>
                <div
                    v-if="formData.engine !== 'local' && formData.engine != StorageEnum.QCLOUD && formData.engine != StorageEnum.ALIYUN">
                    <el-form-item label=" 存储空间名称" prop="bucket">
                        <div class="flex-1">
                            <el-input v-model="formData.bucket" placeholder="请输入存储空间名称(Bucket)" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item label="ACCESS_KEY" prop="access_key">
                        <el-input v-model="formData.access_key" placeholder="请输入ACCESS_KEY(AK)" clearable />
                    </el-form-item>
                    <el-form-item label="SECRET_KEY" prop="secret_key">
                        <el-input v-model="formData.secret_key" placeholder="请输入SECRET_KEY(SK)" clearable />
                    </el-form-item>
                    <el-form-item label="空间域名" prop="domain">
                        <div class="flex-1" style="display: flex;align-items: center;">
                            <el-select v-model="user.agreement" class="m-2">
                                <el-option v-for="item in https" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-input v-model="user.domain" style="height: 32px;" placeholder="请输入储存空间" clearable />
                        </div>
                    </el-form-item>
                </div>
                <!-- 分割 -->
                <div v-if="formData.engine == StorageEnum.ALIYUN">
                    <el-form-item label=" Bucket 名称" prop="bucket">
                        <div class="flex-1">
                            <el-input v-model="formData.bucket" placeholder="请输入存储空间名称(Bucket)" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item label="AccessKey ID" prop="access_key">
                        <el-input v-model="formData.access_key" placeholder="请输入ACCESS_KEY(AK)" clearable />
                    </el-form-item>
                    <el-form-item label="AccessKey Secret" prop="secret_key">
                        <el-input v-model="formData.secret_key" placeholder="请输入SECRET_KEY(SK)" clearable />
                    </el-form-item>
                    <el-form-item label="Endpoint（地域节点）" prop="domain">
                        <div class="flex-1">
                            <div>
                                <el-input v-model="formData.endpoint" placeholder="请输入Endpoint（地域节点域名）" clearable />
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="Bucket 域名" prop="domain">
                        <div class="flex-1" style="display: flex;align-items: center;">
                            <el-select v-model="user.agreement" class="m-2">
                                <el-option v-for="item in https" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-input v-model="user.domain" style="height: 32px;" placeholder="请输入储存空间" clearable />
                        </div>
                    </el-form-item>
                </div>
                <!-- 分割 -->
                <div v-if="formData.engine == StorageEnum.QCLOUD">
                    <el-form-item label="App ID" prop="app_id" style="margin-bottom: 0px !important;">
                        <div class="flex-1">
                            <el-input v-model="formData.app_id" placeholder="请输入App ID" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-tips">App ID 是您项目的ID</div>
                    </el-form-item>
                    <el-form-item label="Secret ID" prop="access_key" style="margin-bottom: 0px !important;">
                        <div class="flex-1">
                            <el-input v-model="formData.access_key" placeholder="请输入Secret ID" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-tips">Secret
                            ID
                            是您项目的安全秘钥，具有该账户完全的权限，请妥善保管</div>
                    </el-form-item>
                    <el-form-item label="Secret Key" prop="secret_key" style="margin-bottom: 0px !important;">
                        <div class="flex-1">
                            <el-input v-model="formData.secret_key" placeholder="请输入Secret Key" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-tips">Secret
                            Key
                            是您项目的安全秘钥，具有该账户完全的权限，请妥善保管</div>
                    </el-form-item>
                    <el-form-item label="存储空间(Bucket)" prop="bucket" style="margin-bottom: 0px !important;">
                        <div class="flex-1">
                            <el-input v-model="formData.bucket" placeholder="请输入储存空间" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-tips">请保证空间属性为公有读私有写地域</div>
                    </el-form-item>
                    <el-form-item label="地域" prop="region" style="margin-bottom: 0px !important;">
                        <div class="flex-1">
                            <el-select v-model="formData.region" class="m-2">
                                <el-option v-for="item in area" :key="item.code" :label="item.name" :value="item.code" />
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-tips">存储空间(Bucket)所在的地域</div>
                    </el-form-item>
                    <el-form-item label="自定义访问URL" prop="domain" style="margin-bottom: 0px !important;">
                        <div class="flex-1" style="display: flex;align-items: center;">
                            <el-select v-model="user.agreement" class="m-2">
                                <el-option v-for="item in https" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-input v-model="user.domain" style="height: 32px;" placeholder="请输入储存空间" clearable />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="form-tips">自定义访问域名，请确保域名支持 https协议，如不填写会使用OSS默认域名</div>
                    </el-form-item>
                </div>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="0">关闭</el-radio>
                        <el-radio :label="1">开启</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import { storageSetup, qcloud_region } from '@/api/setting/storage'
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { storageDetail } from '@/api/setting/storage'
enum StorageEnum {
    LOCAL = 'local', // 本地
    QINIU = 'qiniu', // 七牛云
    ALIYUN = 'aliyun', // 阿里云OSS
    QCLOUD = 'qcloud' // 腾讯云OSS
}

const emit = defineEmits(['success'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formData = reactive({
    engine: '',
    bucket: '',
    access_key: '',
    secret_key: '',
    domain: '',
    region: '', // 腾讯云需要
    status: 0,
    app_id: "",// 腾讯云需要
    agreement: "",
    endpoint: ""
})
const user = reactive({
    agreement: "https://",
    domain: ""
})
const area = ref([
    {
        name: "",
        code: ""
    }
])
const https = reactive([
    {
        value: "https://",
        label: "https://"
    },
    {
        value: "http://",
        label: "http://"
    }
])
const storageArr = [
    {
        name: '本地存储',
        type: StorageEnum.LOCAL,
        tips: '本地存储方式不需要配置其他参数'
    },
    {
        name: '七牛云存储',
        type: StorageEnum.QINIU,
        tips: '切换七牛云存储后，素材库需要重新上传至七牛云'
    },
    {
        name: '阿里云OSS',
        type: StorageEnum.ALIYUN,
        tips: '切换阿里云OSS后，素材库需要重新上传至阿里云OSS'
    },
    {
        name: '腾讯云OSS',
        type: StorageEnum.QCLOUD,
        tips: '切换腾讯云OSS后，素材库需要重新上传至腾讯云OSS'
    }
]
const getLists = async () => {
    const results = await qcloud_region({})
    console.log(results)
    area.value = results
}
const formRules = {
    bucket: [
        {
            required: true,
            message: '请输入存储空间名称',
            trigger: 'blur'
        }
    ],
    access_key: [
        {
            required: true,
            message: '请输入ACCESS_KEY',
            trigger: 'blur'
        }
    ],
    secret_key: [
        {
            required: true,
            message: '请输入SECRET_KEY',
            trigger: 'blur'
        }
    ],
    domain: [
        {
            required: true,
            message: '请输入空间域名',
            trigger: 'blur'
        }
    ],
    region: [
        {
            required: true,
            message: '请输入REGION',
            trigger: 'blur'
        }
    ],
    app_id: [
        {
            required: true,
            message: '请输入App ID',
            trigger: 'blur'
        }
    ],
    secret_id: [
        {
            required: true,
            message: '请输入Secret ID',
            trigger: 'blur'
        }
    ]
}

const getStorageInfo = computed(() => {
    return storageArr.find((item) => item.type == formData.engine)
})

const handleSubmit = async () => {
    formData.domain = user.agreement + user.domain
    await formRef.value?.validate()
    await storageSetup(formData)
    popupRef.value?.close()
    emit('success')
}

const getDetail = async () => {
    const data = await storageDetail({
        engine: formData.engine
    })
    for (const key in data) {
        //@ts-ignore
        formData[key] = data[key]
    }
    if (formData.domain != "") {
        user.agreement = formData.domain.split('://')[0] + '://'
        user.domain = formData.domain.split('://')[1]
    }
}

const open = (type: string) => {
    formData.engine = type
    popupRef.value?.open()
    getDetail()
}

const handleClose = () => {
    formRef.value?.resetFields()
}
getLists()
defineExpose({
    open
})
</script>
